import { ref } from 'vue'

/**
 * 对话框显示和隐藏的钩子函数
 * @param {Boolean} defaultVisible - 默认是否显示
 * @returns {Object} 对话框状态和方法
 */
export function useDialog(defaultVisible = false) {
  // 对话框显示状态
  const visible = ref(defaultVisible)
  
  // 对话框标题
  const title = ref('')
  
  // 对话框宽度
  const width = ref('50%')
  
  // 对话框内容加载状态
  const loading = ref(false)
  
  // 对话框确认按钮加载状态
  const confirmLoading = ref(false)
  
  // 显示对话框
  const showDialog = (options = {}) => {
    if (options.title) {
      title.value = options.title
    }
    if (options.width) {
      width.value = options.width
    }
    visible.value = true
  }
  
  // 隐藏对话框
  const hideDialog = () => {
    visible.value = false
    // 重置状态
    loading.value = false
    confirmLoading.value = false
  }
  
  // 设置对话框标题
  const setTitle = (newTitle) => {
    title.value = newTitle
  }
  
  // 设置对话框宽度
  const setWidth = (newWidth) => {
    width.value = newWidth
  }
  
  // 设置加载状态
  const setLoading = (isLoading) => {
    loading.value = isLoading
  }
  
  // 设置确认按钮加载状态
  const setConfirmLoading = (isLoading) => {
    confirmLoading.value = isLoading
  }
  
  // 切换对话框显示状态
  const toggleDialog = () => {
    visible.value = !visible.value
  }
  
  return {
    visible,
    title,
    width,
    loading,
    confirmLoading,
    showDialog,
    hideDialog,
    setTitle,
    setWidth,
    setLoading,
    setConfirmLoading,
    toggleDialog
  }
}